<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>机构名称：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.groupId"
                        filterable
                        clearable
                        placeholder="请选择机构"
                        remote
                        reserve-keyword
                        :remote-method="loadXx"
                        :loading="flag.schoolFlag"
                    >
                        <el-option
                            v-for="item in schools"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>姓名：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="姓名"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>手机号：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.mobile"
                        clearable
                        placeholder="手机号"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>注册来源：</label>
                <div class="table-query-input">
                    <el-select v-model="queryData.channelType" placeholder="请选择" clearable>
                        <el-option label="pc7.0后台导入" value="pcAdmin7"></el-option>
                        <el-option label="pc7.0前台注册" value="pcWeb7"></el-option>
                        <el-option label="pc6.0前台注册" value="pcWeb6"></el-option>
                        <el-option label="pc6.0后台导入" value="pcAdmin6"></el-option>
                        <el-option label="app" value="app"></el-option>
                        <el-option label="小程序" value="miniProgram"></el-option>
                    </el-select>
                </div>

            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="warning"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-lock"
                :disabled="selectDisable"
                @click="batchLock(false)"
            >批量禁用
            </el-button>
            <el-button
                type="info"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-unlock"
                :disabled="selectDisable"
                @click="batchLock(true)"
            >批量启用
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="头像"
                    width="80"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-avatar :src="coverImage(scope.row.header)"
                        >{{ scope.row.name }}
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="昵称（名字）"
                    width="100"
                ></el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机号"
                    width="150"
                ></el-table-column>
                <el-table-column prop="mobile" label="注册来源" width="120">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="userChannelType[scope.row.channelType]"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="groupName"
                    label="绑定机构"
                    width="150"
                ></el-table-column>
                <el-table-column
                    prop="departmentName"
                    label="绑定组织"
                    width="150"
                ></el-table-column>
                <el-table-column
                    prop="expireTime"
                    label="过期时间"
                    width="180"
                ></el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="注册时间"
                    width="180"
                ></el-table-column>
                <el-table-column
                    prop="loginInfo.loginTime"
                    label="最后登录时间"
                    width="180"
                ></el-table-column>
                <el-table-column
                    prop="loginInfo.loginIp"
                    label="最后登录IP"
                    width="120"
                ></el-table-column>
                <el-table-column
                    prop="loginInfo.loginIp"
                    label="最后登录设备"
                    width="180"
                    align="center"
                >
                    <template slot-scope="scope">
                        <k-tag
                            v-if="
                                scope.row.loginInfo &&
                                    scope.row.loginInfo.deviceType
                            "
                            :tag="deviceType[scope.row.loginInfo.deviceType]"
                        ></k-tag>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            :loading="scope.row.opLoading"
                            class="warning"
                            size="mini"
                            type="text"
                            icon="el-icon-refresh-right"
                            @click="resetPass(scope.row)"
                        >重置密码
                        </el-button>
                        <el-button
                            :loading="scope.row.opLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-folder-opened"
                            @click="go('./member-detail?id=' + scope.row.id)"
                        >详情
                        </el-button>
                        <el-button
                            v-if="scope.row.userStatus === 'normal'"
                            :loading="scope.row.opLoading"
                            class="warning"
                            size="mini"
                            type="text"
                            icon="el-icon-lock"
                            @click="changeUserStatus(scope.row, false)"
                        >禁用
                        </el-button>
                        <el-button
                            v-if="scope.row.userStatus === 'lock'"
                            :loading="scope.row.opLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-unlock"
                            @click="changeUserStatus(scope.row, true)"
                        >启用
                        </el-button>
                        <el-button
                            v-if="!scope.row.groupId"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                               toReBind(scope.row, '关联机构')
                            "
                        >关联机构
                        </el-button>
                        <el-button
                            v-if="scope.row.groupId"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="unBind(scope.row)"
                        >取消机构关联
                        </el-button>
                        <el-button
                            v-if="scope.row.groupId"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="upExpireTime(scope.row)"
                        >更新过期时间
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog :title="reBindTitle" :visible.sync="reBindVisible" width="80%" :modal="false">
            <div class="el-dialog-div">
                <group-bind-component
                    v-if="reBindVisible"
                    @bind="closeGroup"
                >
                </group-bind-component>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";
import {unBindGroupMember, reBindGroupMember, upGroupMemberExpireTime} from "@/api/user";
import groupBindComponent from "@/views/models/vrs/group/groupBind";

export default {
    name: "MemberList",
    components: {groupBindComponent},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: "",
                mobile: "",
                userType: 16,
                groupId: null,
                keyword: null,
                owner: false,
                channelType: null,
                channelPointer: null,
                loginInfo: true,
                orders: [
                    {
                        asc: false,
                        column: "created_time"
                    }
                ]
            },
            schools:null,
            channelPointers: [],
            flag: {
                schoolFlag: false,
                channelPointer: false
            },
            reBindVisible: null,
            reBindTitle: null,
            reBindId: null,
        };
    },
    computed: {
        ...mapState({
            userChannelType: state => state.status.userChannelType,
            deviceType: state => state.status.deviceType
        })
    },
    watch: {
        // "queryData.channelType"(channelType) {
        //     this.channelPointers = [];
        //     this.queryData.channelPointer = null;
        //     this.loadChannelPointers();
        // }
        "queryData.groupId"(code) {
            if (!code) {
                this.loadXx();
            }
        }
    },
    created() {
        // this.loadChannelPointers();
        this.loadXx();
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/member/admin-page", queryData);
        },
        loadXx(query) {
            return get("/user/sys/group/list", {
                name: query,
                size:1000
            }).then(res => {
                this.schools = res;
                return res;
            });
        },
        async batchLock(status) {
            if (!status) {
                await this.$confirm("确定禁用这些账号吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }
            this.tableData
                .filter(v => this.tableSelect.includes(v.id))
                .forEach(v => this.changeUserStatus(v, status));
        },
        changeUserStatus(data, status) {
            data.opLoading = true;
            post(`/user/cu/admin/user/enable/${status}/${data.id}`)
                .then(res => {
                    data.userStatus = status ? "normal" : "lock";
                })
                .finally(() => {
                    data.opLoading = false;
                });
        },
        toReBind(data, title) {
            this.reBindVisible = true;
            this.reBindTitle = title;
            this.reBindId = data.id;
        },
        unBind(data) {
            unBindGroupMember({id: data.id}).then(res => {
                this.search();
            })
        },
        upExpireTime(data) {
            upGroupMemberExpireTime({id: data.id}).then(res => {
                this.search();
            })
        },
        closeGroup(groupId) {
            reBindGroupMember({userId: this.reBindId, groupId: groupId}).then(res => {
                this.search();
                this.$message.success("绑定成功")
                this.reBindVisible = false;
            })
        },
        loadChannelPointers(query) {
            if (this.queryData.channelType === "ownerChanel") {
                this.channelPointers = Object.keys(this.deviceType).map(key => {
                    return {
                        name: this.deviceType[key].desc,
                        id: key
                    };
                });
            } else {
                this.flag.channelPointer = true;
                return get("/user/cu/user/page", {
                    name: query,
                    userType: {
                        channelUser: 128,
                        agentChannel: 64
                    }[this.queryData.channelType]
                })
                    .then(res => {
                        this.channelPointers = res.records;
                        return res;
                    })
                    .finally(() => {
                        this.flag.channelPointer = false;
                    });
            }
        },
        channelShow(item) {
            if (item.channelType === "ownerChanel") {
                return this.deviceType[item.channelPointer];
            }
            return item.channelName;
        },
        async resetPass(row) {
            await this.$confirm("确定将密码重置为tk123456吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            });
            post(`/user/cu/user/change/password-admin/${row.id}`, {
                newPassword: "tk123456"
            })
                .then(() => {
                    this.$message.success("重置成功");
                })
                .catch(e => {
                    this.$message.error("重置失败");
                });
        }
    }
};
</script>

<style lang="scss" scoped></style>
